<template>
  <div class="app-container">
    <!-- 流水单信息 -->
    <h5 class="titleInfo">流水单信息</h5>
    <div class="listDiv" v-loading="tableLoading">
      <el-table
        :data="tableData1"
        border
        style="width: 100"
        show-summary
        :summary-method="getSummaries"
      >
        <el-table-column fixed label="序号" align="center" type="index" width="50"></el-table-column>
        <el-table-column prop="payType" align="center" label="付款方式">
          <template slot-scope="scope">{{scope.row.payType|payTypeFilter}}</template>
        </el-table-column>
        <el-table-column prop="xfzMoney" align="center" label="消费总金额"></el-table-column>
        <el-table-column prop="zlzMoney" align="center" label="奖励总金额"></el-table-column>
        <el-table-column prop="zfMoney" align="center" label="杂费金额"></el-table-column>
        <el-table-column prop="payMoney" align="center" label="已支付金额"></el-table-column>
      </el-table>
    </div>
    <div class="divBar" />
    <!-- 线上收款支付明细 -->
    <h5 class="titleInfo">线上收款支付明细</h5>
    <div class="listDiv" v-loading="tableLoading">
      <el-table
        :data="tableData2"
        border
        style="width: 100"
        show-summary
        :summary-method="getSummaries"
      >
        <el-table-column fixed label="序号" align="center" type="index" width="50"></el-table-column>
        <el-table-column prop="payTypeInt" align="center" label="支付方式">
          <template slot-scope="scope">{{scope.row.payTypeInt|payTypeIntFilter}}</template>
        </el-table-column>
        <el-table-column prop="bizOrderAmount" align="center" label="支付金额"></el-table-column>
        <el-table-column prop="merchantSplitAmount" align="center" label="子商户分账金额"></el-table-column>
        <el-table-column prop="comAmt" align="center" label="手续费"></el-table-column>
        <el-table-column prop="createdAt" align="center" label="支付时间"></el-table-column>
      </el-table>
    </div>
    <div class="divBar" />
    <!-- 退款明细 -->
    <h5 class="titleInfo">退款明细</h5>
    <div class="listDiv" v-loading="tableLoading">
      <el-table
        :data="tableData3"
        border
        style="width: 100"
        show-summary
        :summary-method="getSummaries"
      >
        <el-table-column fixed label="序号" align="center" type="index" width="50"></el-table-column>
        <el-table-column prop="payType" align="center" label="付款方式">
          <template slot-scope="scope">{{scope.row.payType|payTypeFilter}}</template>
        </el-table-column>
        <el-table-column prop="tkxfzMoney" align="center" label="退款消费总金额"></el-table-column>
        <el-table-column prop="tkzlzMoney" align="center" label="退款奖励金额"></el-table-column>
        <el-table-column prop="tkzfMoney" align="center" label="退款杂费金额"></el-table-column>
      </el-table>
    </div>
    <div class="divBar" />
    <!-- 
    回款情况-->
    <h5 class="titleInfo">回款情况</h5>
    <el-form ref="list" :inline="true" :model="list" label-width="130px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="活动名称">{{ list.salesTypeValue }}</el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="listDiv" v-loading="tableLoading">
      <el-table
        :data="tableData4"
        border
        style="width: 100"
        show-summary
        :summary-method="getSummaries"
      >
        <el-table-column fixed label="序号" align="center" type="index" width="50"></el-table-column>
        <el-table-column prop="repaymentSn" align="center" label="回款单号"></el-table-column>
        <el-table-column prop="paymentId" align="center" label="付款方式">
          <template slot-scope="scope">{{scope.row.paymentId}}</template>
        </el-table-column>
        <el-table-column prop="receivableAmount" align="center" label="应回款金额"></el-table-column>
        <el-table-column prop="surplusReceivableAmount" align="center" label="剩余回款金额"></el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import HospitalStatement from "@/api/HospitalStatement";
export default {
  name: "HospitalStatementDetail",
  data() {
    return {
      form: {},
      // table列表
      tableData1: [],
      tableData2: [],
      tableData3: [],
      tableData4: [],
      tableLoading: false,
      // 数值列表数据
      totalsarr1: [],
      totalsarr2: [],
      totalsarr3: [],
      totalsarr4: [],
      totalsarr5: [],
      totalsarr6: [],
      totalsarr7: [],
      totalsArr1: [],
      totalsArr2: [],
      totalsArr3: [],
      totalsArr4: [],
      totalsArr5: [],
      // 流水单信息
      totalPrice: null,
      allPrice: null,
      xjinMoney: null,
      payAccounts: null,
      list: {}
    };
  },
  mounted() {
    let id = this.$route.query.userId.replace(/\"/g, "");
    // console.log(id);
    this.getDetails(id);
    // console.log(this.sum([1, 2, 3, 4]));
  },
  filters: {
    //流水单付款方式 1线上收款 2现金 3分期
    payTypeFilter(e) {
      switch (e) {
        case 1:
          return "线上收款";
        case 2:
          return "现金";
        case 3:
          return "分期";
        case 4:
          return "金币";
        default:
          return "暂无";
      }
    },
    //线上收款支付明细支付方式 1：信用卡快捷支付 2：借记卡快捷支付 3：微信支付 4：支付宝支付
    payTypeIntFilter(e) {
      switch (e) {
        case 1:
          return "信用卡快捷支付";
        case 2:
          return "借记卡快捷支付";
        case 3:
          return "微信支付";
        case 4:
          return "支付宝支付";
        default:
          return "暂无";
      }
    },
    //退款明细付款方式：0，旧数据默认值；1，自费；2，分期
    paymentIdFilter(e) {
      switch (e) {
        case 0:
          return "旧数据默认值";
        case 1:
          return "自费";
        case 2:
          return "分期";
        default:
          return "暂无";
      }
    },
    //回款情况付款方式：0，旧数据默认值；1，自费；2，分期
    paymentIdFilter(e) {
      switch (e) {
        case 0:
          return "旧数据默认值";
        case 1:
          return "自费";
        case 2:
          return "分期";
        default:
          return "暂无";
      }
    },
    // 暂无
    filterNull(e) {
      if (!e) {
        return "暂无";
      } else {
        return e;
      }
    }
  },
  methods: {
    // 获取详情列表
    getDetails(e) {
      this.tableLoading = true;
      HospitalStatement.getDetails({ id: e })
        .then(res => {
          // console.log(res);
          // console.log(res.data.data.flowList);
          if (!res.data.code) {
            this.tableData1 = res.data.data.flowList;
            this.tableData2 = res.data.data.paymentOnlineList;
            this.tableData3 = res.data.data.refundList;
            this.tableData4 = res.data.data.repaymentList;
            this.list = res.data.data;
            // this.tableData = resData.list;
            res.data.data.paymentOnlineList.forEach(e => {
              // console.log(e)
              this.totalsArr1.push(Number(e.bizOrderAmount));
              this.totalsArr2.push(Number(e.merchantSplitAmount));
              this.totalsArr3.push(Number(e.comAmt));
            });
            res.data.data.repaymentList.forEach(e => {
              this.totalsArr4.push(Number(e.receivableAmount));
              this.totalsArr5.push(Number(e.surplusReceivableAmount));
            });
            this.tableData1.forEach(e => {
              // console.log(e)
              this.totalsarr1.push(Number(e.xfzMoney));
              this.totalsarr2.push(Number(e.zlzMoney));
              this.totalsarr3.push(Number(e.zfMoney));
              this.totalsarr4.push(Number(e.payMoney));
            });
            res.data.data.refundList.forEach(e => {
              this.totalsarr5.push(Number(e.tkxfzMoney));
              this.totalsarr6.push(Number(e.tkzlzMoney));
              this.totalsarr7.push(Number(e.tkzfMoney));
            });
            // console.log(this.tableData1);
            // console.log(this.tableData3);
            // console.log(this.totalsArr);
          } else {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: "warning"
            });
          }
          this.tableLoading = false;
        })
        .catch(err => {
          this.errorStatus(err);
          this.tableLoading = false;
        });
    },
    // 累加
    sum(arr) {
      return eval(arr.join("+"));
    },
    // table表数据合计
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      let amounts1;
      let amounts2;
      let amounts3;
      let amounts4;
      let amounts5;
      let Amounts1;
      let Amounts2;
      let Amounts3;
      let Amounts4;
      let Amounts5;
      let Amounts6;
      let Amounts7;
      if (this.totalsArr1.length > 0) {
        amounts1 = Number(this.sum(this.totalsArr1)).toFixed(2);
        amounts2 = Number(this.sum(this.totalsArr2)).toFixed(2);
        amounts3 = Number(this.sum(this.totalsArr3)).toFixed(2);
      }
      if (this.totalsArr4.length > 0) {
        amounts4 = Number(this.sum(this.totalsArr4)).toFixed(2);
        amounts5 = Number(this.sum(this.totalsArr5)).toFixed(2);
      }
      if (this.totalsarr1.length > 0) {
        Amounts1 = Number(this.sum(this.totalsarr1)).toFixed(2);
        Amounts2 = Number(this.sum(this.totalsarr2)).toFixed(2);
        Amounts3 = Number(this.sum(this.totalsarr3)).toFixed(2);
        Amounts4 = Number(this.sum(this.totalsarr4)).toFixed(2);
      }
      if (this.totalsarr5.length > 0) {
        Amounts5 = Number(this.sum(this.totalsarr5)).toFixed(2);
        Amounts6 = Number(this.sum(this.totalsarr6)).toFixed(2);
        Amounts7 = Number(this.sum(this.totalsarr7)).toFixed(2);
      }
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
          return;
        }
        switch (column.property) {
          case "bizOrderAmount":
            // sums[index] = amounts > 0 ? amounts : "0.00";
            sums[index] = amounts1;
            break;
          case "merchantSplitAmount":
            sums[index] = amounts2;
            break;
          case "comAmt":
            sums[index] = amounts3;
            break;
          case "receivableAmount":
            sums[index] = amounts4;
            break;
          case "surplusReceivableAmount":
            sums[index] = amounts5;
            break;
          case "xfzMoney":
            sums[index] = Amounts1;
            break;
          case "zlzMoney":
            sums[index] = Amounts2;
            break;
          case "zfMoney":
            sums[index] = Amounts3;
            break;
          case "payMoney":
            sums[index] = Amounts4;
            break;
          case "tkxfzMoney":
            sums[index] = Amounts5;
            break;
          case "tkzlzMoney":
            sums[index] = Amounts6;
            break;
          case "tkzfMoney":
            sums[index] = Amounts7;
            break;
          default:
            break;
        }
      });
      return sums;
    },
    //失败状态弹窗
    errorStatus(txt) {
      this.eleMsg(txt, "error");
    },
    //弹窗组件
    eleMsg(txt, status) {
      this.$message({
        showClose: true,
        message: txt,
        type: status
      });
    }
  }
};
</script>
<style scoped>
.app-container {
  padding: 0.1px !important;
}
.form {
  margin-left: 20px;
}
.listDiv {
  padding-bottom: 20px;
  margin: 0 20px;
  box-sizing: border-box;
}
</style>